<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sx" uri="/struts-dojo-tags"%>

<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="js/yui/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="css/AutoComplete.css" media="screen">

<style type="text/css">
<!--
    #roomNoAuto {
	    width:15em; /* set width here or else widget will expand to fit its container */
	    padding-bottom:2em;
	}
-->
</style>

<script type="text/javascript" src="js/yui/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="js/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="js/yui/json/json-min.js"></script>
<script type="text/javascript" src="js/yui/element/element-min.js"></script>
<script type="text/javascript" src="js/yui/paginator/paginator-min.js"></script>
<script type="text/javascript" src="js/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="js/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="js/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="js/yui/container/container-min.js"></script>
<script type="text/javascript" src="js/yui/button/button-min.js"></script>
<script type="text/javascript" src="js/yui/event/event-min.js"></script>
<script type="text/javascript" src="js/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="js/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>

<script type="text/javascript">
    
    var pnlClearRoom = new YAHOO.widget.Panel("pnlClearRoom",
                {   width:"550px", height:"200px",
                    draggable: true,
                    fixedcenter: true,
                    modal: true,
                    context: ['anchorElement','bl','tr'],
                    close: true,
                    visible: false });
    pnlClearRoom.render(document.body);
    pnlClearRoom.hide();
    
    YAHOO.example.DynamicData = function() {
		
        var fmtChkRoom = function(elCell, oRecord, oColumn, oData) {
            elCell.innerHTML = "<input type='checkbox' name='chkRoom' value='" + oData + "'>";
            elCell.style.textAlign = "center";
        };
        var fmtCenter = function(elCell, oRecord, oColumn, oData) {
            elCell.innerHTML = oData;
            elCell.style.textAlign = "center";
        };
        var fmtStatus = function(elCell, oRecord, oColumn, oData) {
            elCell.innerHTML = "<span id='spnStatus_" + oData + "'></span>";
            elCell.style.textAlign = "center";
        };
        
        var roomColDefs = [  //sortable:true enables sorting
            {key:"roomId", label:"", formatter:fmtChkRoom, resizeable:true, width:15},
            {key:"seq", label:"No.", formatter:fmtCenter, resizeable:true, width:35},
            {key:"roomCode", label:"Room No.", formatter:fmtCenter, resizeable:true, width:70},
            {key:"dateFrom", label:"Date From", formatter:fmtCenter, resizeable:true, width:90},
            {key:"dateTo", label:"Date To", formatter:fmtCenter, resizeable:true, width:90},
            {key:"roomId", label:"Status", formatter:fmtStatus, resizeable:true, width:50}
        ];
		
        var params = "hiddenType=1&userId=1166";
        
        var roomDS = new YAHOO.util.DataSource("reservBack_getTable.action?" + params);
        roomDS.responseType = YAHOO.util.DataSource.TYPE_JSON;
        roomDS.responseSchema = {
            resultsList: "object.records.detail",
            fields: [
                {key:"seq"},
                {key:"roomId"},
                {key:"roomCode"},
                {key:"dateFrom"},
                {key:"dateTo"}
            ],
            metaFields: {
                recordsReturned: "object.recordsReturned",
                totalRecords: "object.totalRecords", // Access to value in the server response
                startIndex: "object.startIndex",
                //sort: "object.sort",
                dir: "object.dir",
                pageSize: "object.pageSize"
            }
        };

        var requestStr = "&sort=id&dir=asc&startIndex=0&results=10";
        var roomConfig = {
            initialRequest: requestStr, // Initial request for first page of data
            dynamicData: true, 			// Enables dynamic server-driven data
            paginator: new YAHOO.widget.Paginator({ rowsPerPage:10, recordOffset:10, containers:'roomPaging' })
        };
        
        var roomTable = new YAHOO.widget.DataTable("roomTable", roomColDefs, roomDS, roomConfig);
        /*roomTable.subscribe("postRenderEvent", function(){
            var paginator = this.get('paginator');
            //paginator.setPage(0, true);
            paginator.update();
        });*/
		
        YAHOO.widget.DataTable.prototype.getRequestBuilder = function(){
            var requestBuilder = "&sort=id&dir=asc&startIndex=0&results=10&roomCode=" + document.getElementById("roomCode").value;
            return requestBuilder;
        }
        YAHOO.widget.DataTable.prototype.requery = function(newRequest){
            currRow = 0;
            var callback={
                success : roomTable.onDataReturnReplaceRows,
                failure : roomTable.onDataReturnInitializeTable,
                scope   : roomTable,
                argument: roomTable.getState()
            };
            roomTable.getDataSource().sendRequest((newRequest === undefined?this.getRequestBuilder():newRequest), callback);
        };
        roomTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
            try{
                oPayload.totalRecords = parseInt(oResponse.meta.totalRecords);
                totalRows = parseInt(oResponse.meta.totalRecords);
            } catch(e){}
            return oPayload;
        };
		
        var btnClearRoom = new YAHOO.widget.Button("btnClearRoom");
        btnClearRoom.on("click", function(e) {
        	roomTable.requery();
        	document.getElementById("pnlClearRoom").style.display = "block";
        	pnlClearRoom.show();
        }, this, true);

        function processClearRoom(roomId){
            var callback = {
                success: function(o){
	            	try{
	                    var jsonData = YAHOO.lang.JSON.parse(o.responseText);
	                    objResult = eval("("+ jsonData.object +")");
	                    document.getElementById("spnStatus_"+roomId).innerHTML = "<font color='green'>" + objResult.status + "</font>";
	            	} catch(x){}
	            },
	            failure: function(o){
                    document.getElementById("spnStatus_"+roomId).innerHTML = "<font color='red'>Error</font>";
	            }
            };
            var params = "roomId=" + roomId;
            var conn = YAHOO.util.Connect.asyncRequest("GET", "${pageContext.request.contextPath}/reservBack_processClearRoom.action?" + params, callback);
        }
        
        var btnSearch = new YAHOO.widget.Button("btnSearch");
        btnSearch.on("click", function(e) {
        	roomTable.requery();
        }, this, true);
        
        var btnProcess = new YAHOO.widget.Button("btnProcess");
        btnProcess.on("click", function(e) {
        	document.getElementById("roomCode").value = "";
        	var objChkRoom = [];
            objChkRoom = document.getElementsByName("chkRoom");
            if(objChkRoom){
	        	var countChkRoom = objChkRoom.length;
	        	if(!countChkRoom){
	        		if(objChkRoom.checked){
	        			processClearRoom(objChkRoom.value);
	        		}
	        	} else{
	        		for(var i=0; i<countChkRoom; i++){
	        			if(objChkRoom[i].checked){
	        				processClearRoom(objChkRoom[i].value);
		        		}
	        		}
	        	}
            }
        }, this, true);
        
        var btnClose = new YAHOO.widget.Button("btnClose");
        btnClose.on("click", function(e) {
        	pnlClearRoom.hide();
        }, this, true);
        
        return {
            ds: roomDS,
            dt: roomTable
        };
    }();
</script>

<div id="pnlClearRoom" style="visibility: hidden; display: none; background-color: #ffffff;">
    <div class="hd">Clear Room</div>
    <div class="bd" style="overflow:auto">
        <table cellspacing="0" align="center">
        <tr>
            <td>Room Code &nbsp;
				<input type="text" id="roomCode" size="5" maxlength="10" style="height: 20; vertical-align: bottom; border: 1px #999999 solid">
          		&nbsp;
          		<button id="btnSearch"> Go </button>
            </td>
        </tr>
        <tr>
            <td align="center" style="padding-top: 10px">
                <div id="roomTable"></div>
                <div id="roomPaging"></div>
            </td>
        </tr>
        <tr>
            <td align="center" height="35px">
                <button id="btnProcess"> Process </button>
                <button id="btnClose"> Close </button>
            </td>
        </tr>
        </table>
    </div>
    <div id="statusDiv" class="ft">&nbsp;</div>
</div>
